XHTML ডকুমেন্টে টেবিল তৈরি করা HTML-এর মতোই, তবে এখানে কিছু অতিরিক্ত নিয়ম এবং সিনট্যাক্সের নিয়ম মেনে চলা প্রয়োজন। XHTML হল XML এর ভিত্তিতে তৈরি, যার কারণে সব ট্যাগ এবং অ্যাট্রিবিউটগুলো সঠিকভাবে বন্ধ এবং কেস-সেন্সিটিভ হওয়া আবশ্যক।
১. <table> ট্যাগ
১.1 পরিচিতি
<table> ট্যাগটি একটি টেবিল তৈরির জন্য ব্যবহৃত হয়। এই ট্যাগের মধ্যে টেবিলের সারি (<tr>) এবং সেলের কনটেন্ট (<td> বা <th>) থাকবে।
১.2 ব্যবহার
<table> ট্যাগটি টেবিলের মূল কন্টেইনার, যেখানে সব রো এবং কলাম থাকে। এটি সাধারণত border, width, cellpadding, cellspacing ইত্যাদি অ্যাট্রিবিউট দিয়ে কাস্টমাইজ করা হয়, তবে XHTML এ অ্যাট্রিবিউটগুলো XHTML স্ট্যান্ডার্ড অনুসারে ব্যবহার করা উচিত।
১.3 উদাহরণ
<table border="1">
<!-- টেবিলের সারি (row) -->
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>শহর</th>
</tr>
<!-- প্রথম ডেটা সারি -->
<tr>
<td>রাহুল</td>
<td>২৫</td>
<td>ঢাকা</td>
</tr>
<!-- দ্বিতীয় ডেটা সারি -->
<tr>
<td>মিনা</td>
<td>২২</td>
<td>চট্টগ্রাম</td>
</tr>
</table>
২. <tr> ট্যাগ
২.1 পরিচিতি
<tr> ট্যাগটি টেবিলের একটি সারি তৈরি করতে ব্যবহৃত হয়। এটি <table> ট্যাগের ভিতরে ব্যবহার করা হয় এবং এর মধ্যে একাধিক <td> বা <th> ট্যাগ থাকতে পারে।
২.2 ব্যবহার
<tr>ট্যাগের মধ্যে থাকা<td>বা<th>ট্যাগগুলো টেবিলের সেল তৈরি করে।- একটি টেবিলের ভিতরে একাধিক
<tr>ট্যাগ ব্যবহার করে বিভিন্ন সারি তৈরি করা হয়।
২.3 উদাহরণ
<tr>
<td>অলিক</td>
<td>৩০</td>
<td>রাজশাহী</td>
</tr>
৩. <td> ট্যাগ
৩.1 পরিচিতি
<td> (table data) ট্যাগটি একটি টেবিল সেলের কন্টেন্ট হিসেবে ব্যবহৃত হয়। এটি একটি টেবিল সারির মধ্যে ডেটা প্রদর্শন করতে সাহায্য করে।
৩.2 ব্যবহার
<td> ট্যাগের মধ্যে সাধারণত টেক্সট, সংখ্যা, চিত্র, বা অন্যান্য HTML এলিমেন্ট থাকতে পারে। এটি টেবিলের একটি সাধারণ সেল তৈরি করে।
৩.3 উদাহরণ
<td>লিপি</td>
<td>২৮</td>
<td>সিলেট</td>
৪. <th> ট্যাগ
৪.1 পরিচিতি
<th> (table header) ট্যাগটি টেবিলের হেডিং সেল তৈরি করতে ব্যবহৃত হয়। এটি টেবিলের শিরোনাম বা প্রধান শিরোনাম সেলগুলোর জন্য ব্যবহৃত হয়, এবং স্বাভাবিকভাবেই গা dark ় বা পাতলা ফন্টে প্রদর্শিত হয়।
৪.2 ব্যবহার
<th> ট্যাগটি সাধারণত <tr> ট্যাগের মধ্যে থাকে এবং এটি সারির শিরোনাম, যেমন কলামের নাম বা বিভাগের নাম হিসেবে ব্যবহার করা হয়। এটি সেলটি গা dark ় করে এবং মাঝে মাঝে কেন্দ্রিকভাবে প্রদর্শন করে।
৪.3 উদাহরণ
<th>নাম</th>
<th>বয়স</th>
<th>শহর</th>
৫. এক্সএইচটিএমএল টেবিল তৈরি করা: পূর্ণ উদাহরণ
নিচে একটি সম্পূর্ণ এক্সএইচটিএমএল টেবিলের উদাহরণ দেওয়া হলো, যাতে <table>, <tr>, <td>, এবং <th> ট্যাগগুলি সঠিকভাবে ব্যবহৃত হয়েছে:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Student Table</title>
</head>
<body>
<h1>Student Information</h1>
<table border="1">
<tr>
<th>নাম</th>
<th>বয়স</th>
<th>শহর</th>
</tr>
<tr>
<td>রাহুল</td>
<td>২৫</td>
<td>ঢাকা</td>
</tr>
<tr>
<td>মিনা</td>
<td>২২</td>
<td>চট্টগ্রাম</td>
</tr>
<tr>
<td>অলিক</td>
<td>৩০</td>
<td>রাজশাহী</td>
</tr>
</table>
</body>
</html>
৬. XHTML টেবিলের কিছু অতিরিক্ত টিপস
৬.1 টেবিলের স্টাইলিং
XHTML-এ টেবিলের স্টাইল করার জন্য <style> ট্যাগ বা বাইরের CSS ফাইল ব্যবহার করতে পারেন। উদাহরণস্বরূপ, টেবিলের সীমানা, কলামের প্রস্থ, ব্যাকগ্রাউন্ড কালার ইত্যাদি পরিবর্তন করা যায়।
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
৬.2 অ্যাক্সেসিবিলিটি
- টেবিলের কন্টেন্ট এক্সেসিবল করার জন্য,
<th>ট্যাগেরscopeঅ্যাট্রিবিউট ব্যবহার করা উচিত। এই অ্যাট্রিবিউটটি ব্রাউজারকে জানায় কোন সেলটি রো, কলাম, বা গ্রিডের হেডিং।
<th scope="col">নাম</th>
<th scope="col">বয়স</th>
<th scope="col">শহর</th>
এক্সএইচটিএমএল ডকুমেন্টে টেবিল তৈরি করার জন্য <table>, <tr>, <td>, এবং <th> ট্যাগগুলি সঠিকভাবে ব্যবহার করতে হয়। একটি টেবিলের সেল গঠন এবং শিরোনাম সঠিকভাবে প্রদর্শন করার জন্য এই ট্যাগগুলি অপরিহার্য। এছাড়াও, XHTML-এর কেস-সেন্সিটিভ নিয়ম অনুসরণ করে সব ট্যাগকে সঠিকভাবে বন্ধ করা জরুরি।
Read more
